@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">游戏充值</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="top-bar" style="padding: 20px 0;">
                                            <el-input v-model="queryForm.unionid" placeholder="请输入unionid" style="width: 240px"></el-input>
                                            <el-input v-model="queryForm.game_num" placeholder="请输入账号" style="width: 240px"></el-input>
                                            <el-button type="primary" @click="search">搜索</el-button>
                                        </div>


                                        <el-table
                                            :data="orderList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="unionid"
                                                label="unionid"
                                                width="240"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="amount"
                                                label="充值金额"
                                                width="100"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="version_name"
                                                label="游戏版本"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="area"
                                                label="游戏区服"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="game_num"
                                                label="游戏账号"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                min-width="120"
                                                prop="comeform"
                                                label="来源"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="create_time"
                                                width="160"
                                                label="时间"
                                            >
                                            </el-table-column>
                                        </el-table>

                                        <el-pagination
                                            style="margin-top: 20px"
                                            background
                                            layout="prev, pager, next"
                                            @current-change="pageChange"
                                            :current-page="curPage"
                                            :page-count="totalPage">
                                        </el-pagination>

                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    queryForm: {
                        unionid: '',
                        game_num: '',
                        page: 1,
                    },
                    orderList: [],
                    totalPage: 0,
                    curPage: 0,
                }
            },
            mounted() {
                this.queryForm.unionid = this.getUrlParam('union_id')
                this.getOrderList()
            },
            watch: {

            },
            methods: {
                getOrderList() {
                    adminApi_getGameRechargeLog(this.queryForm).then(res => {
                        this.orderList = res.data.data
                        this.totalPage = res.data.last_page
                        this.curPage = res.data.current_page
                    })
                },
                pageChange(p) {
                    this.queryForm.page = p
                    this.getOrderList()
                },
                search() {
                    this.queryForm.page = 1
                    this.getOrderList()
                },
                getUrlParam(name) {
                    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    let r = window.location.search.substr(1).match(reg);
                    if (r != null) return decodeURI(r[2]);
                    return '';
                },
            },
        })
    </script>
    </body>

@endsection
